<template>
  <view class="container">
    <!-- 顶部渐变背景区域 -->
    <view class="header-section">
      <!-- 听写报告模块 -->
      <view class="report-header">
        <view class="report-left">
          <view class="report-title">听写批改报告</view>
          <view class="report-desc">1. 建议重点训练"是、做"等字。</view>
          <view class="report-desc">2. 重点关注"小明"的学习情况，他的错误较多</view>
        </view>
        <view class="report-right">
          <view class="task-detail f f-a-c f-j-c">任务详情
            <image src="/static/youjiantou.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
          </view>
          <view class="ai-bg">
            <image src="/static/AI.png" class="ai-icon" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据统计模块 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-label">人数:{{ statistics.totalStudents }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">提交:{{ statistics.friends }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">AI批改:{{ statistics.trainings }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">异常:{{ statistics.abnormal }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">未审阅:{{ statistics.unreviewed }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">未提交:1</text>
        </view>
      </view>

      <view class="summary-stats">
        <view class="summary-item">
          <text class="summary-number">{{ statistics.allCorrect }}</text>
          <text class="summary-label">全对</text>
        </view>
        <view class="summary-item">
          <text class="summary-number">{{ statistics.hasErrors }}</text>
          <text class="summary-label">有错</text>
        </view>
        <view class="summary-item">
          <text class="summary-number">{{ statistics.ungraded }}</text>
          <text class="summary-label">未批改</text>
        </view>
      </view>
    </view>

    <!-- 错误统计图表 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title-wrapper f f-a-c f-j-c">
          <view style="margin-top: -15rpx;" class="chart-title">错误统计</view>
        </view>
      </view>
      <view class="chart-container">
        <eachet></eachet>
      </view>
    </view>

    <!-- 辅导统计图表 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title-wrapper f f-a-c f-j-c">
          <view style="margin-top: -15rpx;" class="chart-title">辅导统计</view>
        </view>
      </view>
      <view class="chart-container">
        <eachet2></eachet2>
      </view>
    </view>

    <!-- 作业展示模块 -->
    <view class="homework-section">
      <!-- 异常作业 -->
      <view class="homework-category">
        <view class="category-header">
          <view class="category-tag abnormal">异</view>
          <text class="category-title">异常作业</text>
          <text class="category-action">分享</text>
          <image class="share-icon" src="/static/youjiantou.png"></image>
        </view>
        <view class="homework-images">
          <image 
            v-for="(img, index) in abnormalHomework" 
            :key="index"
            :src="img"
            class="homework-img"
            @click="previewImage(img, abnormalHomework)"
          ></image>
        </view>
      </view>
      
      <!-- 优秀作业 -->
      <view class="homework-category">
        <view class="category-header">
          <view class="category-tag excellent">优</view>
          <text class="category-title">优秀作业</text>
          <text class="category-action">分享</text>
          <image class="share-icon" src="/static/youjiantou.png"></image>
        </view>
        <view class="homework-images">
          <image 
            v-for="(img, index) in excellentHomework" 
            :key="index"
            :src="img"
            class="homework-img"
            @click="previewImage(img, excellentHomework)"
          ></image>
        </view>
      </view>
      
      <!-- 待提升作业 -->
      <view class="homework-category">
        <view class="category-header">
          <view class="category-tag improve">待</view>
          <text class="category-title">待提升作业</text>
          <text class="category-action">分享</text>
          <image class="share-icon" src="/static/youjiantou.png"></image>
        </view>
        <view class="homework-images">
          <image 
            v-for="(img, index) in improvementHomework" 
            :key="index"
            :src="img"
            class="homework-img"
            @click="previewImage(img, improvementHomework)"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from "@qiun/ucharts";
import eachet from "@/components/eachet.vue";
import eachet2 from "@/components/eachet2.vue";
export default {
  components: {
    eachet,
    eachet2,
  },
  data() {
    return {
      statistics: {
        totalStudents: 20,
        friends: 19,
        trainings: 17,
        abnormal: 2,
        unreviewed: 2,
        unsubmittedStudent: "小红",
        allCorrect: 10,
        hasErrors: 7,
        ungraded: 2,
      },

      // 图表数据
      errorChartData: {
        categories: ["第1题", "第2题", "第3题", "第4题", "第5题"],
        series: [
          {
            name: "错误A",
            data: [15, 8, 12, 10, 16],
          },
          {
            name: "错误B",
            data: [20, 15, 18, 14, 20],
          },
          {
            name: "错误C",
            data: [12, 18, 15, 16, 12],
          },
          {
            name: "错误D",
            data: [8, 12, 10, 8, 14],
          },
        ],
      },

      tutorChartData: {
        categories: ["第1题", "第2题", "第3题", "第4题", "第5题"],
        series: [
          {
            name: "辅导A",
            data: [15, 8, 12, 10, 16],
          },
          {
            name: "辅导B",
            data: [20, 15, 18, 14, 20],
          },
          {
            name: "辅导C",
            data: [12, 18, 15, 16, 12],
          },
          {
            name: "辅导D",
            data: [8, 12, 10, 8, 14],
          },
        ],
      },

      // 作业图片数据
      abnormalHomework: [
        '/static/1.png',
        '/static/2.jpg',
        '/static/1.png'
      ],
      excellentHomework: [
        '/static/1.png',
        '/static/2.jpg',
        '/static/1.png'
      ],
      improvementHomework: [
        '/static/1.png',
        '/static/2.jpg',
        '/static/1.png'
      ],
    };
  },

  onReady() {
    this.initErrorChart();
    this.initTutorChart();
  },

  methods: {
    // 初始化错误统计图表
    initErrorChart() {
      this.errorChart = new uCharts({
        type: "column",
        context: uni.createCanvasContext("errorChart", this),
        width: uni.upx2px(690),
        height: uni.upx2px(400),
        categories: this.errorChartData.categories,
        series: this.errorChartData.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#6236FF"],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {
          show: false,
        },
        xAxis: {
          disableGrid: true,
          itemCount: 10,
          scrollShow: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          data: [
            {
              min: 0,
              max: 20,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: uni.upx2px(18),
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      });
    },

    // 初始化辅导统计图表
    initTutorChart() {
      this.tutorChart = new uCharts({
        type: "column",
        context: uni.createCanvasContext("tutorChart", this),
        width: uni.upx2px(690),
        height: uni.upx2px(400),
        categories: this.tutorChartData.categories,
        series: this.tutorChartData.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#6236FF"],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {
          show: false,
        },
        xAxis: {
          disableGrid: true,
          itemCount: 10,
          scrollShow: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          data: [
            {
              min: 0,
              max: 20,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: uni.upx2px(18),
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      });
    },

    // 图表触摸事件
    touchErrorChart(e) {
      this.errorChart.showToolTip(e, {
        format: function (item, category) {
          return category + " " + item.name + ":" + item.data;
        },
      });
    },

    moveErrorChart(e) {
      this.errorChart.scroll(e);
    },

    touchEndErrorChart(e) {
      this.errorChart.hideToolTip();
    },

    touchTutorChart(e) {
      this.tutorChart.showToolTip(e, {
        format: function (item, category) {
          return category + " " + item.name + ":" + item.data;
        },
      });
    },

    moveTutorChart(e) {
      this.tutorChart.scroll(e);
    },

    touchEndTutorChart(e) {
      this.tutorChart.hideToolTip();
    },

    // 预览图片
    previewImage(current, urls) {
      uni.previewImage({
        current: current,
        urls: urls
      });
    },

    // 查看具体作业
    viewHomework(homework) {
      uni.navigateTo({
        url: `/pages/homework-detail/index?id=${homework.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #4e95ff 0%, #ffffff 100%);
  padding: 0;
}

// 顶部渐变背景区域
.header-section {
  background: linear-gradient(180deg, #4e95ff 0%, #ffffff 100%);
  padding: 30rpx;
  padding-bottom: 0;
}

// 听写报告模块
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

.report-left {
  flex: 1;
}

.report-title {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 40rpx;
  color: #ffffff;
  margin-bottom: 20rpx;
}

.report-desc {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.report-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20rpx;
}

.task-detail {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 28rpx;
  color: #ffffff;
  cursor: pointer;
}

.ai-bg {
  width: 270rpx;
  height: 234rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-icon {
  width: 270rpx;
  height: 234rpx;
}

// 数据统计模块
.stats-section {
  background: #ffffff;
  margin: 0 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.stat-item {
  background: linear-gradient(309deg, #E6FAFE 0%, #D1FFEB 100%);
  border-radius: 12rpx;
  padding: 20rpx;
  text-align: center;
}

.stat-label {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 24rpx;
  color: #007D5B;
}

.summary-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.summary-number {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 600;
  font-size: 48rpx;
  color: #333333;
}

.summary-label {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
}

// 图表区域
.chart-section {
  background: white;
  border-radius: 20rpx;
  margin: 0 30rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.chart-header {
  background: linear-gradient(90deg, #4E95FF 0%, #7B68EE 100%);
  padding: 20rpx 30rpx;
}

.chart-title-wrapper {
  width: 200rpx;
  height: 67rpx;
}

.chart-title {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
}

.chart-container {
  padding: 30rpx;
  width: 100%;
  height: 400rpx;
}

.charts {
  width: 100%;
  height: 100%;
}

// 作业展示模块
.homework-sections {
  background-color: white;
  border-radius: 20rpx;
  margin: 0 30rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.homework-section {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
}

.share-btn {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 28rpx;
  color: #4e95ff;
  cursor: pointer;
}

.homework-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.homework-item {
  width: 160rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.homework-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
